<template>
    <div class="box_alarm">
        <MoodalTitle :title="'区域案件分布情况'">
            <TimeTab :timeList="timeList" @timeReturnFn="timeReturnFn"/>
        </MoodalTitle>
        <div class="dox_cheach" ref="inteRegional"></div>
    </div>
</template>
<script>
import MoodalTitle from '@/components/ModalTitle/Index.vue'
import TimeTab from '@/components/TimeTab/Index.vue'
import {ZhShianalysis}  from '@/api/zhangzi'
export default {
    components: { MoodalTitle, TimeTab },
    data() {
        return {
            timeList: [
                {
                    title: '日',
                    value: 0,
                },
                {
                    title: '周',
                    value: 1,
                },
                {
                    title: '月',
                    value: 2,
                },

            ],
            dateType:0,
             sum : [] 
        }
    },
    mounted() { this.RegionalCasePublish() },
    methods: {
        // 区域案件发布
        RegionalCasePublish() { 
            let page = {
                dateType: this.dateType
            }
            ZhShianalysis.areaCaseAPI(page).then(res => {
                console.log(res,'区域案件发布1');
                if(res.code == 200){
                    res.data.forEach(item =>{
                        this.sum.push({name:item.streetName,value:item.sum })
                    })
                    this.Regional() 
                }
            })
        },
        Regional() {
            let charts = echarts.init(this.$refs.inteRegional)
            var colors = [
                '#5e81ec',
                '#ffc855',
                '#98e79b',
                '#00d695',
                '#00b29a',
                '#5470c6',
                '#91cc75',
                '#fac858',
                '#ee6666',
                '#73c0de',
                '#3ba272',
                '#fc8452',
                '#9a60b4',
                '#ea7ccc',
            ];
            var data = this.sum;
            var total = data.reduce((p, v) => {
                return p + v.value;
            }, 0);
            let option = {
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c} ({d}%)',
                },
                color: colors,
                calculable: true,
                series: [
                    {
                        type: 'pie',
                        radius: ['30%', '65%'],
                        center: ['50%', '50%'],
                        roseType: 'radius',
                        label: {
                            show: true,
                            color: 'inherit',
                            position: 'outside',
                            fontSize: 14,
                            formatter: "{b} {d}%",
                        },
                        labelLine: {
                            length: 1,
                            length2: 20,
                            smooth: true,
                        },
                        data: data,
                    },
                ],
            };

            charts.setOption(option)
        },
        timeReturnFn(val){
            this.dateType = val.value
            this.RegionalCasePublish()
            this.sum = []
        }
    }
}
</script>

<style lang="less" scoped>
.box_alarm {
    width: 60.7rem;
    height: 38.6rem !important;
    margin-bottom: 1.9rem;
}

.dox_cheach {
    position: absolute;
    left: 0;
    top: 6rem;
    width: 50rem;
    height: 30rem;
}
</style>